<template>
  <div>
    <div class="box1">
      <h2>欢迎光临_vue开发的收银系统_水果店</h2>
      <table border="1">
        <tr>
          <th><strong>苹果原价10￥/斤，8折优惠</strong></th>
        </tr>
        <tr>
          <th>
            请输入你要买的斤数
            <!-- <input type="number" v-model="weight"> -->
            <input type="text" v-model="weight">
            <!-- {{weight}} -->
            <button @click="dec">-</button><button @click="add">+</button>
          </th>
        </tr>
        <tr>
          <th><button @click="prices">结账买单</button></th>
        </tr>
        <tr>
          <th>结账单，总价{{total}}￥ 折后价{{discount}}￥ 省了{{save}}￥元</th>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      weight: 0,
      total: 0,
      discount: 0,
      save: 0
    }
  },

  created () {

  },

  methods: {
    add () {
      this.weight++
    },
    dec () {
      if (this.weight === 0) {
        return
      }
      this.weight--
    },
    prices () {
      this.total = this.weight * 10
      this.discount = this.weight * 8
      this.save = this.total - this.discount
    }
  }
}
</script>

<style scoped lang='less'>
  .box1 {
    margin-top: 100px;
    margin-left: 800px;
    h2 {
      margin-left: -10px;
    }
  }
</style>
